<template>
  <page-wrap :show-top="showTop" stay-still back :dark="false" hide-tab txtcolor="#fff" title="绑定职业顾问"
    :bg-color="uNavColor">
    <view class="container">
      <view class="form-box">
        <u-form ref="uForm" :model="form">
          <u-form-item label="职业顾问ID" label-width="180" prop="consultantId">
            <u-input placeholder="请输入职业顾问ID" v-model="form.consultantId" type="number" />
          </u-form-item>
        </u-form>
      </view>
      <view style="margin: 32px 16px">
        <u-button shape="circle" type="primary" @click="onSubmit">绑 定</u-button>
      </view>
    </view>
    <u-modal v-model="show" width="80%" :show-confirm-button="false">
      <view class="slot-content">
        <view class="info">
          <view class="left">
            <u-avatar :src="consultantInfo.pic"></u-avatar>
          </view>
          <view class="right">
            <view class="item">姓名：{{ consultantInfo.iname }}</view>
            <view class="item">顾问ID：{{ consultantInfo.consultantId }}</view>
          </view>
        </view>
        <view class="footer">
          <u-button plain @click="handleCancel">重新输入</u-button>
          <u-button type="primary" @click="handleConfirm">确定</u-button>
        </view>
      </view>
    </u-modal>
  </page-wrap>
</template>

<script>
import IMEventHandler from "@/utils/im";
import { bindConsultant, checkConsultant } from "@/api/modules/career";
export default {
  emits: ["updateBindStatus"],
  data() {
    return {
      uNavColor: this.$uNavColor,
      personId: uni.getStorageSync("person-id").slice(2) || "",
      show: false,
      form: {
        consultantId: "",
      },
      consultantInfo: {},
      rules: {
        consultantId: [
          {
            required: true,
            message: "请输入职业顾问ID",
            trigger: ["change", "blur"],
          },
        ],
      },
      showTop: false,
    };
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  onPageScroll(res) {
    this.showTop = res.scrollTop > 0;
  },
  methods: {
    handleCancel() {
      this.show = false;
    },
    handleConfirm() {
      const params = {
        personId: parseInt(this.personId),
        consultantId: this.form.consultantId,
      };
      bindConsultant(params).then((res) => {
        if (res.code == 200) {
          this.toChat();
          this.show = false;
        }
      });
    },
    toChat() {
      // 是否登录im
      var isIMLogin =
        getApp().globalData.tim && getApp().globalData.tim.getLoginUser();
      if (!isIMLogin) {
        uni.showLoading({
          title: "正在连接",
          mask: true,
        });
        let isFirst = true;
        new IMEventHandler(() => {
          if (isFirst) {
            isFirst = false;
            uni.hideLoading();
            uni.redirectTo({
              url: `/pagesSub/message/chat/index?chatId=${this.consultantInfo.consultantId}`,
            });
          }
        });
      } else {
        uni.redirectTo({
          url: `/pagesSub/message/chat/index?chatId=${this.consultantInfo.consultantId}`,
        });
      }
    },
    onSubmit() {
      this.$refs.uForm.validate(async (valid) => {
        if (valid) {
          try {
            const params = {
              personId: parseInt(this.personId),
              consultantId: this.form.consultantId,
            };
            const res = await checkConsultant(params);
            if (res.code == 200) {
              this.consultantInfo = res.data;
              this.show = true;
            } else {
              uni.showToast({ icon: "none", title: res.status_desc, duration: 1000 });
            }
          } catch (err) {
            uni.showToast({ icon: "none", title: err.message, duration: 1000 });
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  background: #fff;
}
.form-box {
  margin: 32px;
}
.slot-content {
  padding: 32rpx;
  .info {
    display: flex;
    align-items: center;
    .left {
      margin-right: 32rpx;
    }
    .right {
      .item {
        padding-bottom: 16rpx;
      }
    }
  }
  .footer {
    display: flex;
    justify-content: space-around;
    margin-top: 32rpx;
  }
}
</style>
